<template>
    
  <div class="formfile">
    <!-- <h2 class="nav_title">用户信息修改</h2> -->
    <form action="">
      <div class="item">
        <span> 用户名： </span>
        <el-input
          v-model="username"
          name="username"
          type="text"
          placeholder="默认使用匿名用户"
        />
      </div>
     
      <div class="item">
        <span> 用户身份： </span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>

      <div class="item" v-if="isShow">
        <span></span>
            <input
          type="file"
          ref="uploadheaderimg"
          name="headerurl"
          value="单文件上传图片"
          @change="handleImg"
        />
                 
      </div>
      <div class="item" v-if="headerimg">
        <span> </span>
        <img :src="headerimg" alt="" />
      </div>

          
      <div class="btn">
          <el-button @click="handleChange">提交修改</el-button>
      </div>
          
    </form>
      
  </div>
</template>

<script>
import { putHeaderImg, putStudentInfo } from "@/api/data";
export default {
  data() {
    return {
      options: [
        {
          value: "0",
          label: "学生",
        },
        {
          value: "1",
          label: "老师",
        },
      ],
      value: "",
      username: this.$store.state.userdata.username,
      xuehao:'',
      headerimg: "", // 在页面预览的base64图片数据
      emailval: "",
      file: "", // 最终提交到后端的图片信息
      isShow: false,
    };
  },
  watch: {
    value(val) {
      if (val == 0) {
        this.isShow = false;
        // this.value = 0;
      } else {
        this.isShow = true;
      }
    },
  },
  methods: {
    // 最终的表单提交
    async handleChange() {
      if (this.value != 1) {
        // 学生提交修改
        if (this.username.length < 2 || this.username.length > 10) {
          return this.$message.error("用户名长度在2到10个字符之间");
        }

        let data = await putStudentInfo({
          _id: this.$store.state.userdata._id,
          username: this.username,
        });

        if (data.code == 200) {
          // 将修改后的信息重新保存
          this.$store.commit("setuserdata", data.data);
          this.$message.success(data.msg);
          this.username = this.$store.state.userdata.username;
        } else {
          this.$message.error(data.msg);
        }
      } else {
        // 老师提交审核
        var param = new FormData();
        param.append(this.$refs.uploadheaderimg.name, this.file);
        param.append("_id", this.$store.state.userdata._id);
        param.append("username", this.username);
        param.append("user_grade", this.value);
        // console.log(param)
        let data = await putHeaderImg(param);
        if (data.code == 200) {
          // 将修改后的信息重新保存
          this.$store.commit("setuserdata", data.data);
          this.$message.success(data.msg);
          this.isShow = false;
          this.headerimg=""
          this.value=""
        } else {
          this.$message.error(data.msg);
        }
      }
    },

    // 选中了图片
    handleImg(e) {
      var file = e.target.files[0]; // 拿到图片信息
      if (file) {
        this.file = file; // 选中了一张新的图片
        let fd = new FileReader(); // 本地预览
        fd.readAsDataURL(file); // 将图片信息解析成base64
        fd.onload = () => {
          if (fd.result.startsWith("data:image")) {
            // 选中的是一张图片
            this.headerimg = fd.result; // 预览
          } else {
            alert("你选择的不是一张图片");
          }
        };
      } else {
        return;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.formfile {
  padding: 20px;
  form {
    width: 300px;
    img {
      width: 200px;
    }

    .item {
      display: flex;
      align-items: center;
      min-height: 60px;
      span {
        display: block;
        text-align: right;
        min-width: 100px;
        font-size: 14px;
        color: #606266;
        .el-input {
          width: 220px !important;
        }
      }
    }

    .btn {
      height: 60px;
      line-height: 60px;
      text-align: center;
    }
  }
}
.nav_title {
  height: 60px;
  line-height: 60px;
  color: #444;
  text-align: center;
  margin-bottom: 20px;
}
</style>